<template>
    <el-dialog :model-value="props.isImport" :show-close="false" modal-class="customize-dialog" :append-to-body="true" :close-on-click-modal="false" align-center
        width="1000">
        <template #header="{ titleId, titleClass }">
            <div class="flex justify-between items-center dialog-header">
                <div class="flex items-center">
                    <h4 :id="titleId" :class="titleClass">产品导入</h4>
                    <span>您已发布 <el-text type="primary">{{ props.publishedProduct }}</el-text> 个产品，还能导入 <el-text type="success">{{ props.publishProduct }}</el-text> 产品</span>
                </div>
                <svg-icon size="16px" icon-class="close-line" @click="closeDialog"></svg-icon>
            </div>
        </template>
        <div class="flex">
            <div class="flex-1"><el-input v-model="state.keyword" placeholder="请输入产品名称/型号/产品ID" clearable></el-input>
            </div>
            <el-button type="primary" :icon="Search" v-debounce="{ callback: handleSearch, delay: 300 }" class="ml-12px">搜索</el-button>
        </div>
        <el-table :data="state.tableData" :reserve-selection="true" max-height="650px" @selection-change="handleSelectionChange" class="w-full mt-16px">
            <el-table-column type="selection" label="" align="center" width="40" />
            <el-table-column prop="ID" label="产品ID" align="center" width="100" />
            <el-table-column label="产品图片" align="center" width="150">
                <template #default="scope">
                    <img :src="scope.row.Pic" :alt="scope.row.Name" class="w-40px h-40px">
                </template>
            </el-table-column>
            <el-table-column prop="Name" label="产品名称" align="center" />
            <el-table-column prop="time" label="添加时间" align="center" width="180">
                <template #default="scope">
                    {{ formatDate(scope.row.UpdateTime) }}
                </template>
            </el-table-column>
            <el-table-column prop="time" label="创建时间" align="center" width="180">
                <template #default="scope">
                    {{ formatDate(scope.row.CreateDate) }}
                </template>
            </el-table-column>
        </el-table>
        <div class="pl-10px pr-16px page-container flex justify-between items-center">
            <div class="flex items-center text-14px pt-12px">
                已选 <el-text type="success" class="!ml-5px !mr-5px"> {{ selectionData.length }} </el-text> 条数据 <el-button type="primary" class="ml-12px" @click="batchImportProduct">确认导入</el-button>
            </div>
            <Pagination v-if="state.tableData.length > 0" v-model:total="state.page.total" v-model:page="state.page.curPage"
            v-model:limit="state.page.pageSizes" @pagination="handleQuery" />
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import Pagination from '@/components/Pagination/index.vue'
import { dateFormat } from '@/utils/date'
import { importProductApi,searchProductApi,batchImportProductApi } from '@/api/b2b'

const props = defineProps<{
    isImport: boolean,
    publishedProduct:number,
    publishProduct:number
}>()

const emit = defineEmits(['closeDialog','updatePublishProduct'])

const state = reactive({
    tableData: [],
    keyword:'',
    page:{
        total:0,
        curPage:1,
        limit:10,
        pageSizes:10,
    },
})

const formatDate = computed(() => {
    return function (data: string) {
        return dateFormat(data, 'YYYY-MM-DD HH:mm:ss')
    }
})

const loading = ref(true);

const selectionData = ref([])

async function handleSearch() {
    await searchProduct()
}

function handleSelectionChange(rows: any) {
    selectionData.value = rows.map((row:any) => row.ID)
    emit('updatePublishProduct', selectionData.value.length)
}

function handleQuery() {
    loading.value = true
    importProduct()
}

async function importProduct(){
    const res: ResType = await importProductApi({
        tk: state.keyword,
        pn: state.page.curPage,
        pagesize: state.page.pageSizes,
    })
    if(res.code === 200){
        state.tableData = res.data
        state.page.curPage = res.page as number
        state.page.pageSizes = res.pagesize as number
        state.page.total = res.count
        state.page.limit = res.pagesize as number
    }
}

async function searchProduct(){
    const res: ResType = await searchProductApi({
        tk: state.keyword,
        pn: state.page.curPage,
        pagesize: state.page.pageSizes,
    })
    state.tableData = res.data
}

async function batchImportProduct(){
    const res = await batchImportProductApi({
        ids:selectionData.value
    })
    if(res.code === 200){
        ElMessage.success(res.message)
        selectionData.value = []
        closeDialog()
    }else{
        ElMessage.error(res.message)
    }
}
function closeDialog(){
    emit('closeDialog')
}

watchEffect(() => {
    if (props.isImport) {
        importProduct()
    }
})

</script>

<style scoped></style>